<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">
        <el-form-item label="应用系统：" prop="systemName">
          <el-input v-model="search.systemName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="所属单位：" prop="company">
          <el-input v-model="search.company" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item style="margin-top: -2px">
          <el-button type="primary" @click="searchQuery">查询</el-button>
          <el-button type="info" @click="search = {};searchQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <qm-table
      ref="qmTable"
      :data="query"
      keyProp="systemId"
      menuType="text"
      :menuOptions="{ width: 100 }"
      :showView="false"
      :formOptions="{ labelWidth: '120px' }"
      :rules="rules"
    >
      <qm-table-column field="systemName" sortable>应用系统</qm-table-column>
      <qm-table-column field="company" sortable>所属单位</qm-table-column>
      <qm-table-column field="contacter" sortable>联系人</qm-table-column>
      <qm-table-column field="telephone" sortable>联系方式</qm-table-column>
      <qm-table-column field="isEnabled" fieldtype="enabledisable" sortable width="100px">是否启用</qm-table-column>

      <template v-slot:form="{ formData, viewModel, models }">
        <el-row>
          <el-col :span="12">
            <el-form-item label="应用系统：" prop="model.systemName">
              <el-input v-model="formData.systemName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属单位：" prop="model.company">
              <el-input v-model="formData.company"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人：" prop="model.contacter">
              <el-input v-model="formData.contacter"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式：" prop="model.telephone">
              <el-input v-model="formData.telephone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间：" prop="model.startTime">
              <el-date-picker
                v-model="formData.startTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                required
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间：" prop="model.endTime">
              <el-date-picker
                v-model="formData.endTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                required
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="分配的账号：" prop="model.loginId">
              <el-input v-model="formData.loginId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分配的密钥：" prop="model.password">
              <el-input v-model="formData.password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="系统编码：" prop="model.systemCode">
              <el-input v-model="formData.systemCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用：" prop="model.isEnabled">
              <el-radio v-model="formData.isEnabled" :label="true">是</el-radio>
              <el-radio v-model="formData.isEnabled" :label="false">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="限制系统IP：" prop="model.disabledIp">
              <el-input
                type="textarea"
                :autosize="{ minRows: 5, maxRows: 20}"
                v-model="formData.disabledIp"
              ></el-input>
              <font color="red">(无限制不填 , 多个请用英文分号;隔开)</font>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="viewModel.pageAction === 'view'">
          <el-col :span="12">
            <el-form-item label="创建时间：" prop="model.createdDate">
              <el-date-picker type="datetime" v-model="formData.createdDate" style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间：" prop="model.updatedDate">
              <el-date-picker type="datetime" v-model="formData.updatedDate" style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>服务器分配</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="commonSelectVisible = true"
            >新增</el-button>
          </div>

          <common-select
            v-model="commonSelectVisible"
            selectKey="selectMessageServers"
            selectMode="0"
            @success="doAddServer"
          ></common-select>

          <qm-table :data="{ data: models.servers }" :showCheckbox="false" :showToolbar="false">
            <qm-table-column field="messageTypeName" sortable>消息类型</qm-table-column>
            <qm-table-column field="serverName" sortable>服务器名称</qm-table-column>
            <qm-table-column field="isEnabled" fieldtype="enabledisable" sortable>是否启用</qm-table-column>
            <template v-slot:moreBtn="{ row }">
              <el-button type="text" @click="removeServer(row)">删除</el-button>
            </template>
          </qm-table>
        </el-card>
      </template>
    </qm-table>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import CommonSelect from "@/views/commonSelect/list";
import _ from "lodash";
export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      query: "/message/sysMessageSystem/query",
      save: "/message/sysMessageSystem/save",
      delete: "/message/sysMessageSystem/delete",
      entity: "/message/sysMessageSystem/getEntity",
    };
  }

  mixin() {
    return {
      components: {
        CommonSelect,
      },
      data() {
        return {
          commonSelectVisible: false,
          rules: {
            model: {
              systemName: [
                {
                  required: true,
                  message: "这是必填字段",
                  trigger: "blur",
                },
              ],
              company: [
                {
                  required: true,
                  message: "这是必填字段",
                  trigger: "blur",
                },
              ],
              contacter: [
                {
                  required: true,
                  message: "这是必填字段",
                  trigger: "blur",
                },
              ],
              telephone: [
                {
                  required: true,
                  message: "这是必填字段",
                  trigger: "blur",
                },
              ],
              startTime: [
                {
                  required: true,
                  message: "这是必填字段",
                  trigger: "blur",
                },
              ],
              endTime: [
                {
                  required: true,
                  message: "这是必填字段",
                  trigger: "blur",
                },
              ],
              loginId: [
                {
                  required: true,
                  message: "这是必填字段",
                  trigger: "blur",
                },
              ],
              password: [
                {
                  required: true,
                  message: "这是必填字段",
                  trigger: "blur",
                },
              ],
              systemCode: [
                {
                  required: true,
                  message: "这是必填字段",
                  trigger: "blur",
                },
              ],

              isEnabled: [
                {
                  required: true,
                  message: "这是必填字段",
                },
              ],
            },
          },
        };
      },
      methods: {
        removeServer(server) {
          let vm = this.$refs["qmTable"].viewModel;
          vm.models.servers.remove(server);
        },
        doAddServer(rlt) {
          if (!this.isSelect(rlt.serverId)) {
            let vm = this.$refs["qmTable"].viewModel;
            let tmp = _.extend({}, vm.controlData.sysMessageSystemServer);
            tmp.serverId = rlt.serverId;
            tmp.serverName = rlt.serverName;
            tmp.isEnabled = rlt.isEnabled;
            tmp.messageTypeName = rlt.messageTypeName;
            tmp.systemName = rlt.systemName;
            vm.models.servers.push(tmp);
          } else {
            this.notifyError(
              "服务器【" + rlt.serverName + "】已分配，请重新选择"
            );
          }
        },
        isSelect(serverId) {
          let vm = this.$refs["qmTable"].viewModel;
          let find = _.find(vm.models.servers, (item) => {
            return item.serverId === serverId;
          });
          return !!find;
        },
      },
    };
  }
}
</script>

<style scoped lang="scss">
</style>

